<template>
  <!-- 添加商品 -->
  <div>
    <el-dialog v-model="add" title="上架新商品">
      <el-form :model="form">
        <el-form-item label="商品名称：" :label-width="formLabelWidth">
          <el-input v-model="goodsname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容:" :label-width="formLabelWidth">
          <el-input v-model="goodscontent" autocomplete="off" />
        </el-form-item>
        <el-form-item label="价格:" :label-width="formLabelWidth">
          <el-input v-model="goodsprice" autocomplete="off" />
        </el-form-item>
        <el-form-item label="数量:" :label-width="formLabelWidth">
          <el-input v-model="goodsnum" autocomplete="off" />
        </el-form-item>

        <el-upload class="upload-demo" ref="upload" action="/api/add_likelist" :file-list="fileList"
          :on-preview="handlePreview" :on-remove="handleRemove" :limit="limit" list-type="picture-card"
          :auto-upload="false" multiple :show-file-list="true" :on-success="getres" :before-upload="bfimgup"
          :data="{ goodsname, goodscontent, goodsprice, goodsnum, lei }">
          <el-button>上传图片</el-button>
        </el-upload>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="add_like">确定添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <!-- 修改用户信息  -->
  <div>
    <el-dialog v-model="dialogFormVisible" title="修改">
      <el-form :model="form">
        <el-form-item label="商品名称:" :label-width="formLabelWidth">
          <el-input v-model="goodsname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容:" :label-width="formLabelWidth">
          <el-input v-model="goodscontent" autocomplete="off" />
        </el-form-item>
        <el-form-item label="  价格:" :label-width="formLabelWidth">
          <el-input v-model="goodsprice" autocomplete="off" />
        </el-form-item>
        <el-form-item label="  数量:" :label-width="formLabelWidth">
          <el-input v-model="goodsnum" autocomplete="off" />
        </el-form-item>
        <el-upload class="upload-demo" ref="upload" action="/api/update_goods" :file-list="fileList"
          :on-preview="handlePreview" :on-remove="handleRemove" :limit="limit" list-type="picture-card"
          :auto-upload="false" multiple :show-file-list="true" :on-success="getres" :before-upload="bfimgup"
          :data="{ goodsname, goodscontent, goodsprice, goodsnum, id }">
          <el-button>修改图片</el-button>
        </el-upload>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="update_goods">确定修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <div>
    <el-button type="primary" @click="onchange1">上架</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" prop="id" width="50px" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="内容" prop="content" />

      <el-table-column label="价格" prop="price" width="100px" />
      <el-table-column label="数量" prop="num" width="50px" />
      <!-- <el-table-column label="图片" preview-teleported prop=" imgUrl" /> -->
      <el-table-column label="图片" width="80">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image style="width: 60px;height: 60px;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]"
              hide-on-click-modal="true" preview-teleported="true">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small" @click="onchange(scope)">修改</el-button>
          <el-button size="small" type="danger" @click="DeleteLike(scope.$index, scope)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {

      imgs: [],
      fileList: [],
      limit: 5,
      lei: "2",
      id: "",
      goodsname: "",
      goodscontent: "",
      goodsprice: "",
      goodsnum: "",
      formLabelWidth: '140px',
      add: false,
      editDialogVisible: true,
      dialogTableVisible: true,
      dialogFormVisible: false,
      tableData: [],

      search: ''
    }
  },
  mounted() {
    axios.get("/api/getlikelist", {
    }).then(res => {
      // console.log(res)
      this.tableData = res.data
      console.log(this.tableData)
      //  console.log(this.tableData.price)

    })
  },
  methods: {
    handleRemove(file, fileList) {
      // console.log( fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    getres(res) {
      console.log(res)
      console.log(1);
    },
    //定义图片上传前的函数 并返回值false
    bfimgup(file, fileList) {
      //  file.map(item=>{
      //   fileList.append("file",item.raw)
      //  })
      // console.log(fileList)
      // this.construction.file = this.fileList
      // this.construction.addImages = this.imgs
      // this.goodname ="商品名称";
      // this.price ="50";
      // this.count ="99"

    },
    //打开新增弹窗，
    onchange1() {
      this.add = true
    },

    //关闭新增弹窗，发送更新的函数
    add_like() {
      this.$refs.upload.submit();
      this.add = false
      alert("添加成功")
    },

    //打开修改的弹窗，拿到需要修改商品的id
    onchange(scope) {

      this.id = scope.row.id

      this.goodsname = scope.row.name
      this.goodscontent = scope.row.content
      this.goodsprice = scope.row.price
      this.goodsnum = scope.row.num
      this.dialogFormVisible = true
    },
    //修改商品信息*9
    update_goods() {
      this.$refs.upload.submit();
      this.dialogFormVisible = false
      alert("修改成功")

    },
    //删除一个商品
    DeleteLike(index, scope) {
      let id = scope.row.id
      //  console.log(index)     
      axios.get("api/DeleteLike", {
        params: {
          id
        }
      }).then(res => {
        this.tableData.splice(index, 1) //根据下标移除数据
      })
    }

  },
}
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>